<template>
  <div>
    <uploader class="ml-1" :base="base" ref="picUploader" refs="picUploader" title="富文本图片上传" :max="-1" :show="false" :pic="true" @upload="addImg">
      <div slot="add" slot-scope="props">
        <v-btn color="info" @click="$refs[props.refs].upload(props.length)">图片上传</v-btn>
      </div>
    </uploader>
    <editor id="tinymce" :init="init" v-model="contentL"></editor>
  </div>
</template>

<script>
import editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import uploader from './Uploader'
export default {
  name: 'Editor',
  components: {
    editor,
    uploader
  },
  props: {
    plugins: {
      type: [String, Array],
      default: 'lists image media table textcolor wordcount contextmenu'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | forecolor backcolor'
    },
    content: {},
    base: {
      type: [String],
      default: 'article/'
    }
  },
  data () {
    return {
      contentL: this.content,
      init: {
        selector: 'textarea',
        language_url: `./lang/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `./skins/ui/oxide`,
        height: 300,
        branding: false,
        menubar: false,
        plugins: this.plugins,
        toolbar: this.toolbar
      }
    }
  },
  methods: {
    setEditorHeight (height) {
      let dom = document.getElementsByClassName('tox-tinymce')[0]
      let setHeight = height - dom.offsetTop - 420
      if (setHeight <= 480) {
        setHeight = 480
      }
      dom.style.height = setHeight + 'px'
    },
    tinymceInit () {
      tinymce.init({})
      let that = this
      setTimeout(function () {
        that.setEditorHeight(document.documentElement.clientHeight)
      }, 500)
    },
    addImg (data) {
      this.contentL += '<img src="' + data + '" alt="&aring;&deg;&ccedil;&frac34;&aring;&ordm;&brvbar;&eacute;&brvbar;&eacute;&iexcl;&micro;"/>'
    }
  },
  mounted () {
    this.tinymceInit()
  },
  watch: {
    contentL: {
      handler (val) {
        this.$emit('content', val)
      }
    },
    content: {
      handler (val) {
        this.contentL = val
      }
    }
  }
}
</script>

<style scoped>

</style>
